<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content="乐购(TESCO.COM)-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"
    />
    <meta
      name="Keywords"
      content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"
    />
    <title>乐购(TESCO.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 1. 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css" />

    <!-- 2. 引入公共样式表 -->
    <link rel="stylesheet" href="./css/common.css" />

    <!-- 3. 引入插件样式表 -->
    <!-- 轮播图插件 -->
    <link rel="stylesheet" href="./lib/轮播图插件/ZoomPic.css" />
    <link rel="stylesheet" href="./lib/轮播图插件/slider.css" />
    <!-- 左右滑动插件 -->
    <link rel="stylesheet" href="./lib/左右滑动插件/imgcenter.css" />

    <!-- 4. 引入头部样式表 -->
    <link rel="stylesheet" href="./css/header.css" />

    <!-- 5. 引入当前页面样式表 -->
    <!-- 海报 -->
    <link rel="stylesheet" href="./css/indexCss/1.banner.css" />
    <!-- 今日秒杀 -->
    <link rel="stylesheet" href="./css/indexCss/2.seckill.css" />
    <!-- 每日好货推荐 -->
    <link rel="stylesheet" href="./css/indexCss/3.recommend.css" />
    <!-- 主体内容 -->
    <link rel="stylesheet" href="./css/indexCss/4.public.css" />
    <!-- 其他定位组件 -->
    <link rel="stylesheet" href="./css/indexCss/5.others.css" />

    <!-- 6. 引入页脚样式表 -->
    <link rel="stylesheet" href="./css/footer.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div id="header">
      <!-- 头部top -->
      <div class="htop fs14 cff bg00">
        <div class="container clearfix">
          <div class="fl">乐购www.legou.com</div>
          <div class="fr">
            <span>欢迎光临乐购</span>
            <span
              >请 <a href="./login.html">登录 |</a><a href="#"> 注册</a>
            </span>
          </div>
        </div>
      </div>
      <!-- 头部bottom -->
      <div class="hbottom fs18 bgff">
        <div class="container clearfix">
          <!-- logo -->
          <img class="logo fl" src="./imgs/logo.jpg" alt="图片加载失败" />
          <!-- 导航 -->
          <div class="nav fl">
            <div class="clearfix">
              <!-- 搜索 -->
              <form class="search fs14 fl" action="#" method="get">
                <input
                  class="hbtxt"
                  type="text"
                  placeholder="请输入搜索的商品名"
                /><input class="hbsub" type="submit" value="" />
              </form>
              <!-- 购物车 -->
              <a class="shopcar fs14 cfe tac fl" href="#">
                <img src="./imgs/购物车.png" alt="" />
                购物车
                <span class="dpib cfff8 bgfe">0</span>
              </a>
              <a class="order fs14 cd9 tac fl" href="#">我的订单</a>
            </div>
            <!-- 导航栏列表 -->
            <ul class="clearfix">
              <li><a class="c97" href="#">图书</a></li>
              <li><a class="c97" href="#">电子书</a></li>
              <li><a class="c97" href="#">原创文学</a></li>
              <li><a class="c97" href="#">服装</a></li>
              <li><a class="c97" href="#">运动户外</a></li>
              <li><a class="c97" href="#">孕婴童</a></li>
              <li><a class="c97" href="#">家居</a></li>
              <li><a class="c97" href="#">创意文具</a></li>
              <li><a class="c97" href="#">地方特产</a></li>
              <li><a class="c97" href="#">海外购</a></li>
              <li><a class="c97" href="#">电器城</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 海报 -->
    <div id="banner" class="bg52">
      <div class="container clearfix">
        <!-- 左侧边栏导航 -->
        <ul class="aside fs14 bga8 fl rel">
          <!-- 循环列表 -->
          <script>
            let arrli = [
              ["图书", "电子书", "童书"],
              ["女装", "男装", "内衣"],
              ["童装玩具", "孕产", "用品"],
              ["家电", "数码", "手机"],
              ["美妆", "洗护", "保健品"],
              ["家电", "数码", "手机"],
              ["图书", "电子书", "童书"],
              ["女装", "男装", "内衣"],
              ["童装玩具", "孕产", "用品"],
              ["美妆", "洗护", "保健品"],
              ["童装玩具", "孕产", "用品"],
              ["图书", "电子书", "童书"],
            ];
            for (let i = 0; i < 12; i++) {
              document.write(`
                <li>
                  <p class="rel">
                    <a href="#">${arrli[i][0]}</a><a href="#">${arrli[i][1]}</a><a href="#">${arrli[i][2]}</a
                    ><a href="#">></a>
                  </p>
                  <div class="abs bgcr cff dpn">${arrli[i]}</div>
                </li>
              `);
            }
          </script>
        </ul>
        <!-- 海报 -->
        <div id="jswbox" class="fl">
          <pre class="prev">prev</pre>
          <pre class="next">next</pre>
          <ul>
            <li><img src="./imgs/1.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/2.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/3.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/4.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/5.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/6.jpg" alt="图片加载失败" /></li>
            <li><img src="./imgs/7.jpg" alt="图片加载失败" /></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 今日秒杀 -->
    <div class="container">
      <div id="seckill">
        <!-- 小米 -->
        <div>
          <a href="#"><img src="./imgs/xiaomi1.jpg" alt="图片加载失败" /></a
          ><a href="#"><img src="./imgs/xiaomi2.jpg" alt="图片加载失败" /></a
          ><a href="#"><img src="./imgs/xiaomi3.jpg" alt="图片加载失败" /></a
          ><a href="#"><img src="./imgs/xiaomi1.jpg" alt="图片加载失败" /></a>
        </div>
        <!-- 扫码 -->
        <img src="./imgs/shaoma.png" alt="图片加载失败" />
        <!-- 秒杀 -->
        <div class="clearfix">
          <!-- 秒杀倒计时 -->
          <div class="countdown fl cff tac">
            <p class="fs24 fw400">乐购.今日秒杀</p>
            <p class="fs16">倒计时</p>
            <span>00</span><span>:</span><span>00</span><span>:</span
            ><span>00</span>
          </div>
          <!-- 秒杀商品 -->
          <div class="scrolllist fl rel" id="s1">
            <a class="abtn aleft abs" href="#left" title="左移"></a>
            <div class="imglist_w rel">
              <ul class="imglist abs">
                <script>
                  let arr = [
                    "./imgs/1.jpg",
                    "./imgs/2.jpg",
                    "./imgs/3.jpg",
                    "./imgs/4.jpg",
                    "./imgs/5.jpg",
                    "./imgs/6.jpg",
                    "./imgs/7.jpg",
                    "./imgs/8.jpg",
                    "./imgs/9.jpg",
                  ];
                  for (let i = 0; i < 9; i++) {
                    document.write(`
                      <li class="bgff fl">
                        <a href="#"><img src=${arr[i]} alt="图片加载失败" /></a>
                        <p class="fs14 c66">小米小爱音箱 Play</p>
                        <span class="fs16 cff0">¥129.00</span
                        ><s class="cb2">¥230.00</s>
                      </li>
                    `);
                  }
                </script>
              </ul>
              <!--imglist end-->
            </div>
            <a class="abtn aright abs" href="#right" title="右移"></a>
          </div>
        </div>
      </div>
    </div>

    <!-- 每日好货推荐 -->
    <div id="recommend" class="bgff">
      <div class="container">
        <!-- 标题 -->
        <h2 class="fs30 c33 tac fw400">
          <i></i>每日好货推荐<i></i>
          <p></p>
        </h2>
        <!-- 每日好货 -->
        <div class="goods c33 clearfix">
          <div class="bgffdb fl">
            <p class="fs26">
              <span class="cff7 fsi">乐购快抢</span> · 美好生活抢先到
            </p>
            <a class="fs16 c9f dpib" href="#">品质好物 天天低价 >></a>
            <div class="clearfix">
              <div class="bg1 fl rel">
                <a class="fs24 c33 tac dpib abs" href="#">- 诗篇 -</a>
              </div>
              <div class="bg2 fl rel">
                <p class="fs32 fw600">JNBY</p>
                <a class="fs24 c33 tac dpib abs" href="#">JNBY</a>
              </div>
              <div class="bg3 fl rel">
                <a class="fs24 c33 tac dpib abs" href="#">品质女装</a>
              </div>
            </div>
          </div>
          <div class="bgac fl">
            <p class="fs26">
              <span class="c006 fsi">品牌活动</span> · 最后疯抢 3折封顶
            </p>
            <a class="fs16 c9f dpib" href="#">150+品牌疯抢中 >></a>
            <div class="clearfix">
              <div class="bg4 fl rel">
                <a class="fs24 c33 tac dpib abs" href="#">
                  <p class="fs18">ITS SKIN</p>
                  <p class="fs12 c80">明星爆款 买一享三</p>
                </a>
              </div>
              <div class="bg5 fl rel">
                <a class="fs24 c33 tac dpib abs" href="#">
                  <p class="fs18">阿芙</p>
                  <p class="fs12 c80">面部护理好货超值购</p>
                </a>
              </div>
              <div class="bg6 fl rel">
                <a class="fs24 c33 tac dpib abs" href="#">
                  <p class="fs18">Rosel女装</p>
                  <p class="fs12 c80">秋上新 三折封顶</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 版心 -->
    <div class="container">
      <!-- 循环内容 -->
      <script>
        /* 标题 */
        // 标题名
        let title = ["服装配饰", "母婴童装", "精致人生", "家居生活"];
        // 标题类名
        let className = ["accessory", "cloth", "exquisite", "home"];
        // 标题背景色
        let titleBgc = ["bgffb", "bg7a", "bgf7", "bg00b"];
        // 标题背景图
        let titleImg = [
          "标题背景yellow",
          "标题背景purple",
          "标题背景pink",
          "标题背景green",
        ];
        /* 内容 */
        // 左边促销内容
        let Promotion = ["黄金珠宝节", "高质量童装", "完美女神节", "清新家居"];

        // 循环
        for (let i = 0; i < 4; i++) {
          document.write(`
            <div id="public">
              <!-- 标题 -->
              <div class="pubtitle ${className[i]} clearfix">
                <h2 class="fs20 fw400 cff tac ${titleBgc[i]} fl">${title[i]}</h2>
                <i class="dpib fl" style="background: url(./imgs/${titleImg[i]}.png)"></i>
                <ul class="fs16 c80 fr clearfix">
                  <li class="active">热销内衣<s></s></li>
                  <li>精品男装<s></s></li>
                  <li>童装<s></s></li>
                </ul>
              </div>
              <!-- 内容 -->
              <div class="pubcontent clearfix">
                <!-- 左边内容 -->
                <div class="leftbox fl rel">
                  <div>
                    <div class="cff abs">
                      <h3 class="fs24">${Promotion[i]}</h3>
                      <p class="fs14">每满300减30</p>
                    </div>
                  </div>
                  <ul class="bgff">
                    <li><a href="#">女 装</a></li>
                    <li><a href="#">内 衣</a></li>
                    <li><a href="#">泳 衣</a></li>
                    <li><a href="#">功能箱包</a></li>
                    <li><a href="#">户外运动</a></li>
                    <li><a href="#">男 装</a></li>
                    <li><a href="#">女 鞋</a></li>
                    <li><a href="#">男 鞋</a></li>
                    <li><a href="#">全部分类</a></li>
                  </ul>
                </div>
                <!-- 中间内容 -->
                <div class="midbox fl">
                  <!-- 轮播图 -->
                  <div class="pptbox bannerInner">
                    <ul class="innerwrapper">
                      <li>
                        <a href="#"><img src="imgs/banner5.jpg" /></a>
                      </li>
                      <li>
                        <a href="#"><img src="imgs/banner6.jpg" /></a>
                      </li>
                      <li>
                        <a href="#"><img src="imgs/banner7.jpeg" /></a>
                      </li>
                      <li>
                        <a href="#"><img src="imgs/banner8.jpeg" /></a>
                      </li>
                      <li>
                        <a href="#"><img src="imgs/banner9.jpeg" /></a>
                      </li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls">
                      <li class="current">1</li>
                      <li>2</li>
                      <li>3</li>
                      <li>4</li>
                      <li>5</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                  </div>
                  <a href="#"><img src="./imgs/temai.png" alt="图片加载失败" /></a>
                </div>
                <!-- 右边内容 -->
                <div class="rightbox ${className[i]} tac fl">
                  <div class="tab1 clearfix">
                    <a href="#">
                      <p class="fs18">时尚精致女装</p>
                      <p>春夏女装99选3</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">大牌品质鞋包</p>
                      <p>大牌鞋包不止5折</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">魅力舒适内衣</p>
                      <p>CK文胸买2免1</p>
                    </a>
                    <a href="#">
                      <p class="fs18">型格潮流男装</p>
                      <p>阿玛尼低至3折</p>
                    </a>
                  </div>
                  <div class="tab2 dpn clearfix">
                    <a href="#">
                      <p class="fs18">大牌品质鞋包</p>
                      <p>大牌鞋包不止5折</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">型格潮流男装</p>
                      <p>春夏女装99选3</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">魅力舒适内衣</p>
                      <p>阿玛尼低至3折</p>
                    </a>
                    <a href="#">
                      <p class="fs18">时尚精致女装</p>
                      <p>CK文胸买2免1</p>
                    </a>
                  </div>
                  <div class="tab3 dpn clearfix">
                    <a href="#">
                      <p class="fs18">型格潮流男装</p>
                      <p>CK文胸买2免1</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">魅力舒适内衣</p>
                      <p>春夏女装99选3</p>
                    </a>
                    <a href="#"
                      ><p class="fs18">大牌品质鞋包</p>
                      <p>阿玛尼低至3折</p>
                    </a>
                    <a href="#">
                      <p class="fs18">时尚精致女装</p>
                      <p>大牌鞋包不止5折</p>
                    </a>
                  </div>
                </div>
              </div>
              <!-- 品牌商家 -->
              <a href="#"><img src="./imgs/品牌1.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌2.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌3.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌4.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌5.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌6.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌7.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌8.png" alt="图片加载失败" /></a
              ><a href="#"><img src="./imgs/品牌9.png" alt="图片加载失败" /></a>
            </div>
          `);
        }
      </script>
    </div>

    <!-- 页脚 -->
    <div id="footer">
      <!-- 页脚顶部 -->
      <div class="ftop bgff">
        <!-- 版心 -->
        <div class="container">
          <ul class="ultop clearfix">
            <script>
              for (let i = 0; i < 4; i++) {
                // 页脚图片
                let arrimg = ["1", "2", "3", "4"];
                // 页脚段落1
                let arrp1 = ["正品保障", "满86包邮", "售后无忧", "准时送达"];
                // 页脚段落2
                let arrp2 = [
                  "正品行货  放心选购",
                  "满86元 免运费",
                  "7天无理由退货",
                  "收货时间由你做主",
                ];
                document.write(`
                  <li class="fl clearfix">
                    <img class="fl" src="./imgs/页脚${arrimg[i]}.jpg" alt="图片加载失败" />
                    <div class="fl">
                      <p class="fs20 c33">${arrp1[i]}</p>
                      <p class="fs14 c9f">${arrp2[i]}</p>
                    </div>
                  </li>
                `);
              }
            </script>
          </ul>
          <div class="fmid clearfix">
            <ul class="fl">
              <li class="fs18 c33">新手入门</li>
              <li><a class="fs14 c80" href="#">购物流程</a></li>
              <li><a class="fs14 c80" href="#">会员制度</a></li>
              <li><a class="fs14 c80" href="#">订单查询</a></li>
              <li><a class="fs14 c80" href="#">服务协议及隐私说明</a></li>
              <li><a class="fs14 c80" href="#">网站地图</a></li>
            </ul>
            <ul class="fl">
              <li class="fs18 c33">支付方式</li>
              <li><a class="fs14 c80" href="#">货到付款</a></li>
              <li><a class="fs14 c80" href="#">网上支付</a></li>
              <li><a class="fs14 c80" href="#">礼品卡支付</a></li>
              <li><a class="fs14 c80" href="#">其它支付</a></li>
            </ul>
            <ul class="fl">
              <li class="fs18 c33">配送服务</li>
              <li><a class="fs14 c80" href="#">配送进度查询</a></li>
              <li><a class="fs14 c80" href="#">商品验货与签收</a></li>
            </ul>
            <ul class="fl">
              <li class="fs18 c33">相关规则</li>
              <li><a class="fs14 c80" href="#">平台规则</a></li>
              <li><a class="fs14 c80" href="#">退换货政策</a></li>
              <li><a class="fs14 c80" href="#">发票制度</a></li>
              <li><a class="fs14 c80" href="#">帮助中心</a></li>
            </ul>
            <div class="fl">
              <p class="fs14 c33">App更优惠</p>
              <img src="./imgs/页脚二维码.png" alt="图片加载失败" />
            </div>
            <div class="fl">
              <p class="fs14 c33">加微信查订单</p>
              <img src="./imgs/页脚二维码.png" alt="图片加载失败" />
            </div>
          </div>
        </div>
      </div>
      <!-- 页脚底部 -->
      <div class="fbottom c80 tac">
        <p>
          沪ICP备XXXXXXXXX号 | 经营证照 |
          互联网药品信息服务资格证(沪)-经营性-2017-0006 |
          违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX |
        </p>
        <p>
          沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 |
          增值电信业务经营许可证
        </p>
        <img src="./imgs/页脚底部1.jpg" alt="图片加载失败" />
        <img src="./imgs/页脚底部2.jpg" alt="图片加载失败" />
        <img src="./imgs/页脚底部3.jpg" alt="图片加载失败" />
        <img src="./imgs/页脚底部4.jpg" alt="图片加载失败" />
        <img src="./imgs/页脚底部5.jpg" alt="图片加载失败" />
        <img src="./imgs/页脚底部6.jpg" alt="图片加载失败" />
      </div>
    </div>

    <!-- 页面特效部分 -->
    <!-- 二维码 -->
    <div id="code" class="tac bgff fix">
      <div class="fs14 c33">
        <p>下载App</p>
        <img src="./imgs/页脚二维码.png" alt="图片加载失败" />
      </div>
      <div class="fs16 c80"><i class="dpib vam"></i><span>购 物 车</span></div>
    </div>

    <!-- 楼层跳跃 -->
    <ul id="floor" class="fs14 cff tac fix">
      <li class="recFloor"><span class="dpn">童装</span></li>
      <li class="accFloor"><span class="dpn">运动</span></li>
      <li class="cloFloor"><span class="dpn">服装</span></li>
      <li class="exqFloor"><span class="dpn">图书</span></li>
      <li class="homeFloor"><span class="dpn">家居</span></li>
      <li class="btt"><span class="dpn">top</span></li>
    </ul>

    <!-- 固定头部搜索框 -->
    <div id="fixedSearch" class="bgff6 fix zi999 dpn">
      <div class="container clearfix">
        <div class="logo fl"></div>
      </div>
    </div>

    <!-- 引入jQuery -->
    <script src="./lib/jquery-3.7.1.min.js"></script>
    <!-- 引入插件 -->
    <!-- 1. 轮播图插件 -->
    <script src="./lib/轮播图插件/ZoomPic.js"></script>
    <script src="./lib/轮播图插件/slider.js"></script>
    <!-- 2. 左右滑动插件 -->
    <script src="./lib/左右滑动插件/slider.js"></script>
    <!-- 3. 引入公共js -->
    <script src="./js/common.js"></script>
    <!-- 4. 引入首页js -->
    <script src="./js/index.js"></script>
  </body>
</html>
